<template>
    <el-descriptions direction="vertical" :column="4" v-if="loaded">
        <el-descriptions-item :label="fund.type == 1 ? '回款金额' : '付款金额'">
            <z-money :modelValue="fund.amount" />
        </el-descriptions-item>
        <el-descriptions-item :label="fund.type == 1 ? '回款账户' : '付款账户'">
            <z-text :modelValue="fund.account" depend="account" size="large" />
        </el-descriptions-item>
        <el-descriptions-item label="状态">
            <z-dict readonly :modelValue="fund.status" code="fundStatus" />
        </el-descriptions-item>
        <el-descriptions-item :label="fund.type == 1 ? '回款日期' : '付款日期'">
            <z-date :value="fund.date" />
        </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="pane" v-if="loaded">
        <el-tab-pane label="详细信息" name="fund">
            <el-descriptions column="2" border>
                <el-descriptions-item :label="fund.type == 1 ? '回款金额' : '付款金额'">
                    <z-money :modelValue="fund.amount" />
                </el-descriptions-item>
                <el-descriptions-item :label="fund.type == 1 ? '回款日期' : '付款日期'">
                    <z-date :value="fund.date" />
                </el-descriptions-item>
                <el-descriptions-item :label="fund.type == 1 ? '回款账户' : '付款账户'">
                    <z-text :modelValue="fund.account" depend="account" size="large" />
                </el-descriptions-item>
                <el-descriptions-item label="单据编号">
                    {{ fund.document }}
                </el-descriptions-item>
                <el-descriptions-item label="附件">
                    {{ fund.attachment }}
                </el-descriptions-item>
                <el-descriptions-item label="创建人">
                    <z-avatar :value="fund.creator" :plain="false" />
                </el-descriptions-item>
                <el-descriptions-item label="核销人">
                    <z-avatar :value="fund.verificationEmp" :plain="false" />
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    <z-avatar :value="fund.extra" :plain="false" />
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

export default {
    props: {
        params: Object
    },
    data() {
        return {
            fund: null,
            pane: "fund",
            loaded: false
        };
    },

    async created() {
        const id = this.params.id
        this.fund = await $.get({ url: "/do/get/funds", data: { id } })
        this.loaded = true
    },
};
</script>
